'use client'

import { useState, useEffect, useCallback } from 'react'
import { Alert, Button } from 'antd'

export default function DatabaseStatus() {
    const [status, setStatus] = useState('checking') // checking, ready, error
    const [error, setError] = useState(null)
    const [isChecking, setIsChecking] = useState(false)

    const checkDatabaseStatus = useCallback(async () => {
        if (isChecking) return // 防止重复检查

        try {
            setIsChecking(true)
            setStatus('checking')

            // 使用一个简单的健康检查端点，而不是产品列表
            const response = await fetch('/api/health')

            if (response.ok) {
                setStatus('ready')
                setError(null)
            } else {
                // 如果健康检查端点不存在，回退到产品 API
                const fallbackResponse = await fetch('/api/products?page=1&limit=1')
                const result = await fallbackResponse.json()

                if (fallbackResponse.ok && result.success) {
                    setStatus('ready')
                    setError(null)
                } else {
                    setStatus('error')
                    setError(result.error?.message || '数据库连接失败')
                }
            }
        } catch (err) {
            setStatus('error')
            setError(err.message || '检查数据库状态时发生错误')
        } finally {
            setIsChecking(false)
        }
    }, [isChecking])

    useEffect(() => {
        // 只在组件首次挂载时检查一次
        checkDatabaseStatus()
    }, [checkDatabaseStatus])

    if (status === 'checking') {
        return null // 不显示检查状态，避免闪烁
    }

    if (status === 'error') {
        return (
            <Alert
                message="数据库未就绪"
                description={
                    <div>
                        <p>{error}</p>
                        <p className="mt-2 text-sm">
                            请确保 PostgreSQL 数据库已启动并运行数据库初始化脚本。
                        </p>
                        <pre className="mt-2 p-2 bg-gray-100 rounded text-xs overflow-x-auto">
                            {`# 启动数据库
npm run db:start

# 检查数据库状态
npm run db:status

# 如果需要重置数据库
npm run db:reset`}
                        </pre>
                    </div>
                }
                type="warning"
                showIcon
                action={
                    <Button size="small" onClick={checkDatabaseStatus}>
                        重新检查
                    </Button>
                }
                className="mb-4"
            />
        )
    }

    return null // 数据库正常时不显示任何内容
}